如何创建拨动开关

2024-02-20 22:51| 来源: 网络整理| 查看: 265

/* 开关 - 滑块周围的框 */ .switch { position: relative; display: inline-block; width: 60px; height: 34px;}

/* 隐藏默认 HTML 复选框 */ .switch input { opacity: 0; width: 0; height: 0;}

/* 滑块 */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s;}

.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;}

input:checked + .slider { background-color: #2196F3;}

input:focus + .slider { box-shadow: 0 0 1px #2196F3;}

input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);}

/* 圆形滑块 */ .slider.round { border-radius: 34px;}

.slider.round:before { border-radius: 50%;}

【本文地址】

公司简介

联系我们